<template>
    <!-- header -->
    <div class="nav-container page-component">
      <!--左侧导航 #start -->
      <div class="nav left-nav">
        <div class="nav-item selected">
          <span class="v-link selected dark"
            :onclick="'javascript:window.location=\'/hospital/'+hospital.hoscode+'\''">预约挂号</span>
        </div>
        <div class="nav-item">
          <span class="v-link clickable dark"
            :onclick="'javascript:window.location=\'/hospital/detail/'+hospital.hoscode+'\''">医院详情</span>
        </div>
        <div class="nav-item">
          <span class="v-link clickable dark"
            :onclick="'javascript:window.location=\'/hospital/notice/'+hospital.hoscode+'\''">预约须知</span>
        </div>
        <div class="nav-item">
          <span class="v-link clickable dark">停诊信息</span>
        </div>
        <div class="nav-item">
          <span class="v-link clickable dark">查询/取消</span>
        </div>
      </div>
      <!-- 左侧导航 #end -->
      <!-- 右侧内容 #start -->
      <div class="page-container">
        <div class="hospital-home">
          <div class="common-header">
            <div class="title-wrapper">
              <span class="hospital-title">{{ hospital.hosname }}</span>
              <div class="icon-wrapper">
                <span class="iconfont"></span>
                {{ hospital.param.hostypeString }}
              </div>
            </div>
          </div>
          <div class="info-wrapper">
            <img class="hospital-img" :src="'data:image/jpeg;base64,'+hospital.logoData" :alt="hospital.hosname">
            <div class="content-wrapper">
              <div>挂号规则</div>
              <div class="line">
                <div>
                  <span class="label">预约周期：</span>
                  <span>{{ bookingRule.cycle }}天</span>
                </div>
                <div class="space">
                  <span class="label">放号时间：</span>
                  <span>{{ bookingRule.releaseTime }}</span>
                </div>
                <div class="space">
                  <span class="label">停挂时间：</span>
                  <span>{{ bookingRule.stopTime }}</span>
                </div>
              </div>
              <div class="line">
                <span class="label">退号时间：</span>
                <span v-if="bookingRule.quitDay == -1">就诊前一工作日{{ bookingRule.quitTime }}前取消</span>
                <span v-if="bookingRule.quitDay == 0">就诊前当天{{ bookingRule.quitTime }}前取消</span>
              </div>
              <div style="margin-top:20px">医院预约规则</div>
              <div class="rule-wrapper">
                <ol>
                  <li v-for="item in bookingRule.rule" :key="item">{{ item }}</li>
                </ol>
              </div>
            </div>
          </div>
          <div class="title select-title">选择科室</div>
          <div class="select-dept-wrapper">
            <div class="department-wrapper">
              <div class="hospital-department">
                <div class="dept-list-wrapper el-scrollbar" style="height: 100%;">
                  <div class="dept-list el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
                    <div class="el-scrollbar__view">
                      <div class="sub-item" v-for="(item,index) in departmentVoList" :key="item.id"
                        :class="index == activeIndex ? 'selected' : ''" @click="move(index,item.depcode)">{{ item.depname
                        }}</div>
                    </div>
                  </div>
                  <div class="el-scrollbar__bar is-horizontal">
                    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                  </div>
                  <div class="el-scrollbar__bar is-vertical">
                    <div class="el-scrollbar__thumb" style="transform: translateY(0%); height: 91.4761%;"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sub-dept-container">
              <div v-for="(item,index) in departmentVoList" :key="item.id" :class="index == 0 ? 'selected' : ''"
                class="sub-dept-wrapper" :id="item.depcode">
                <div class="sub-title">
                  <div class="block selected"></div>
                  {{ item.depname }}
                </div>
                <div class="sub-item-wrapper">
                  <div v-for="it in item.children" :key="it.id" class="sub-item" @click="schedule(it.depcode)">
                    <span class="v-link clickable">{{ it.depname }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 #end -->
    </div>
    <!-- footer -->
  </template>
  <script>
  import "~/assets/css/hospital_personal.css";
  import "~/assets/css/hospital.css";
  import hospApi from "@/api/hosp";
  import cookie from 'js-cookie';
  import userInfoApi from '@/api/userInfo'
  export default {
    data() {
      return {
        hoscode: null, //医院编码
        activeIndex: 0, //选中索引
        hospital: {
          param: {} //初始化对象
        },
        bookingRule: {}, //预约规则
        departmentVoList: []  //科室信息
      };
    },
    created() {
      //1获取参数
      this.hoscode = this.$route.params.hoscode;
      //2初始化查询
      this.init();
    },
    methods: {
      //初始化查询
      init() {
        //查询医院信息
        hospApi.item(this.hoscode).then(response => {
          this.hospital = response.data.hospital;
          this.bookingRule = response.data.bookingRule;
        });
  
        //查询相关科室信息
        hospApi.department(this.hoscode).then(response => {
          this.departmentVoList = response.data;
        });
      },
      schedule(depcode) {
      // 登录判断
      let token = cookie.get('token')
      if (!token) {
        loginEvent.$emit('loginDialogEvent')
        return
      }

      //判断认证
      userInfoApi.getUserInfo().then(response => {
        let authStatus = response.data.authStatus
        // authStatus状态为2认证通过  不等于2 没有认证成功
        if (!authStatus || authStatus != 2) {
          window.location.href = '/user'
          return
        }
      })

      window.location.href = '/hospital/schedule?hoscode=' + this.hospital.hoscode + "&depcode="+ depcode
    },

  
      //选中状态
      move(index, depcode) {
        this.activeIndex = index
        document.getElementById(depcode).scrollIntoView();
      },
  
    }
  };
  </script>